<template>
  <div>
    <van-popup 
      v-model="show" 
      position="top" 
      :close-on-click-overlay="false"
      >
      <div class="serach_box">
        <div class="search_title">搜索</div>
        <div class="search_input">
          <van-field 
          v-model="value" 
          :clearable="true"
          :center="true"
          placeholder="请输入关键字"
          @input="onSearch"
          class="search_field"/>
          <span class="search_cancel" @click="onCancel">取消</span>
        </div>
      </div>
      <ul class="search_game" v-if="this.list !== null">
        <li v-for="(item, index) in list" @click="itemClick(index)" :key="index" class="search_game_list">
          <img v-show="item.gamename" src="../../../assets/img/navbar/ic_header_search_ccc.png" alt="">
          <span>{{item.gamename}}</span>
          <span>
            <span class="game_type" style="background: #66b2fe" v-if="item.game_type === '3'">H5游戏</span>
            <span class="game_type" style="background: #ff86a9" v-else-if="item.game_type === '2'">折扣游戏</span>
            <span class="game_type" style="background: #feb12d" v-else-if="item.game_type === '1'">BT游戏</span>
          </span>
        </li>
      </ul>
    </van-popup>
  </div>
</template>

<script>
import { getSearchGame } from '../../../network/home'
  export default {
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      searchList: {
        type: Array,
        default: null,
      }
    },
    data() {
      return {
        value: '',
        timer: null,
        list: null,
      }
    },
    methods: {
      onCancel() {
        //取消输入框
        this.value = ''
        this.list = null
        this.$emit('close-search')
      },
      onSearch(val) {
        //输入内容传值
        // if (val === '') return
        if (this.timer !== null) {
            clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          // this.$emit('on-search', val)
          getSearchGame(val).then(res => {
            if (res.data === null) {
              this.$toast('没有找到相关游戏')
            }else {
              this.list = res.data
            }
          })
        }, 500);
      },
      itemClick(index) {
        this.$router.push('/gameinfo/gameid/' + this.list[index].gameid)
        this.value = ''
        this.list = null
        this.$emit('close-search')
      }
    },
  }
</script>

<style scoped>
.serach_box {
  background: #fff;
  width: 750px;
  margin-left: 50%;
  transform: translateX(-50%);
}

.search_title {
  font-size: 32px;
  line-height: 88px;
  text-align: center;
  color: #333;
  border-bottom: 1px solid #eee;
}

.search_input {
  padding: 30px 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search_field {
  width: 590px;
  border: 1px solid #999;
  height: 66px;
  border-radius: 33px;
  font-size: 24px;
  padding-left: 40px;
}

.search_cancel {
  font-size: 28px;
  color: #333;
  font-weight: bold;
}

.search_game {
  overflow: auto;
  background: #fff;
  width: 750px;
  margin-left: 50%;
  transform: translateX(-50%);
}

.search_game img {
  margin-right: 20px;
  width: 34px;
  height: 34px;
}

.search_game_list {
  padding: 0 30px;
  line-height: 78px;
  font-size: 28px;
  color: #666;
  display: flex;
  align-items: center;
}

.game_type {
  margin-left: 20px;
  display: block;
  height: 32px;
  font-size: 20px;
  color: #fff;
  padding: 0 10px;
  line-height: 32px;
  border-radius: 5px;
}
</style>